import React from 'react';
import PropTypes from 'prop-types'
import style from './progress.module.scss'



class Progress extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            dashArray: Math.PI * 100
        }
        
    }

    static defaultProps = {
        radius: '1rem',
        percent: 0
    }
    render() {
        let progressStyle = {
            'height': this.props.radius,
            'background': this.props.percent?'#ffffff':''
        };
        let dashOffset = (1 - this.props.percent) * this.state.dashArray;
        return (
            <div className={style.progressCircle} style={ progressStyle }>
                <svg
                    viewBox="0 0 100 100"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg">
                    <circle className={style.progressBackground} r="50" cx="50" cy="50" fill="transparent" />
                    <circle
                        className={style.progressBar}
                        r="50"
                        cx="50"
                        cy="50"
                        fill="transparent"
                        strokeDasharray={this.state.dashArray}
                        strokeDashoffset={dashOffset}
                    />
                </svg>
            </div>
        )
    }
}

Progress.propTypes = {
    radius: PropTypes.string,
    percent: PropTypes.number
};


export default Progress;